<template>
  <view v-if="!isLoading" class="container" :style="customThemeStyle({ 'bg-color': setting.page.bgColor })">
    <!-- 头部及背景图 -->
    <view class="header" :style="{ backgroundImage: `url(${setting.page.bgImage})` }">
      <view class="fiexd-action" @click="handleRulesDesc()">
        <text>签到规则</text>
      </view>
    </view>
    <!-- 签到信息 -->
    <view class="signin-info">
      <view class="signin-count">
        <view class="count-item">
          <view class="days">
            <text class="value">{{ currentMonthDays }}</text>
            <text class="unit">天</text>
          </view>
          <view class="title">当月累计签到</view>
        </view>
        <view class="count-item">
          <view class="days">
            <text class="value">{{ continuousDays }}</text>
            <text class="unit">天</text>
          </view>
          <view class="title">已连续签到</view>
        </view>
      </view>
      <!-- 累计签到奖励 -->
      <view v-if="cumulativeInfo.enabled" class="cumulative-info">
        <view class="content notice" @click="handleCumulativePopup()">
          <text>累计签到</text>
          <text class="value">{{ cumulativeInfo.currentDays }}</text>
          <text>天可获得奖励</text>
          <view class="right-arrow">
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>
      <!-- 今日签到奖励 -->
      <view class="today-info notice">
        <view class="content">
          <text>{{ isReport ? '明' : '今' }}日签到可获得</text>
          <text class="value">{{ nowReward.points }}</text>
          <text>{{ pointsSetting.points_name }}</text>
          <!-- <block v-if="nowReward.coupon">
            <text>、</text>
            <text class="value">1</text>
            <text>张优惠券</text>
          </block> -->
        </view>
      </view>
      <!-- 签到按钮 -->
      <view class="btn-wrapper">
        <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">{{ isReport ? '今日已签到' : '立即签到' }}</view>
      </view>
    </view>
    <!-- 签到日历 -->
    <view class="calendar-info">
      <Calendar mode="date" :signinData="signinLogs" />
    </view>
    <!-- 弹窗: 签到规则 -->
    <u-modal v-model="showRulesDesc" title="签到规则">
      <scroll-view class="rules-desc" :scroll-y="true">
        <text>{{ setting.options.rulesDesc }}</text>
      </scroll-view>
    </u-modal>
    <!-- 弹窗: 累计签到奖励 -->
    <CumulativePopup v-if="cumulativeInfo.enabled" v-model="showCumulativePopup" :current="cumulativeInfo.currentKey"
      :ruleList="cumulativeInfo.ruleList" :currentMonthDays="currentMonthDays" />
    <!-- 弹窗: 签到成功 -->
    <SuccessPopup v-model="showSuccessPopup" :reward="rewardData" :currentMonthDays="currentMonthDays" />
  </view>
</template>

<script>
  import WxofficialMixin from '@/core/mixins/wxofficial'
  import * as Api from '@/api/signin'
  import Calendar from './components/Calendar'
  import CumulativePopup from './components/CumulativePopup'
  import SuccessPopup from './components/SuccessPopup'

  export default {
    components: { Calendar, CumulativePopup, SuccessPopup },
    mixins: [WxofficialMixin],
    data() {
      return {
        // 是否加载中
        isLoading: true,
        // 按钮禁用
        disabled: true,
        // 弹窗: 签到规则
        showRulesDesc: false,
        // 弹窗: 累计签到奖励
        showCumulativePopup: false,
        // 弹窗: 签到成功
        showSuccessPopup: false,
        // 当前用户是否登录
        isLogin: false,
        // 每日签到设置
        setting: {},
        // 积分设置: 名称
        pointsSetting: {},
        // 今日是否已签到
        isReport: false,
        // 今日或明日的签到奖励
        nowReward: {},
        // 明日签到奖励
        tomorrowInfo: {},
        // 累计签到奖励
        cumulativeInfo: {},
        // 当月累计签到天数
        currentMonthDays: {},
        // 连续签到天数
        continuousDays: {},
        // 近期的签到记录 (仅显示日期 20250301)
        signinLogs: [],
        // 签到成功后的奖励内容
        rewardData: {}
      }
    },
    // 生命周期函数--监听页面加载
    onLoad(options) {
      // 获取页面详情
      this.getPageData()
    },
    methods: {

      // 获取页面详情
      getPageData() {
        const app = this
        app.isLoading = true
        Api.home()
          .then(({ data }) => {
            app.isLogin = data.isLogin
            app.setting = data.setting
            app.pointsSetting = data.pointsSetting
            app.isReport = data.isReport
            app.nowReward = data.nowReward
            app.cumulativeInfo = data.cumulativeInfo
            app.currentMonthDays = data.currentMonthDays
            app.continuousDays = data.continuousDays
            app.signinLogs = data.signinLogs
            app.disabled = data.isReport
            app.isLoading = false
            // 设置微信公众号链接分享卡片内容
            app.setWxofficialShareData()
          })
      },

      // 设置微信公众号链接分享卡片内容
      setWxofficialShareData() {
        this.updateShareCardData({ title: this.setting.page.shareTitle, desc: this.setting.page.shareDescribe })
      },

      // 显示兑换规则
      handleRulesDesc() {
        this.showRulesDesc = true
      },

      // 立即签到事件
      handleSubmit() {
        const app = this
        if (app.disabled) return
        app.disabled = true
        Api.report()
          .then(({ data }) => {
            this.getPageData()
            app.rewardData = data.reward
            app.showSuccessPopup = true
          })
          .catch(err => err.result.status == 500 && app.$toast(err.errMsg))
          .finally(() => app.disabled = false)
      },

      // 显示累计签到奖励
      handleCumulativePopup() {
        this.showCumulativePopup = true
      },

    },

    // 设置分享内容
    onShareAppMessage() {
      return {
        title: this.setting.page.shareTitle,
        path: "/pages/signin/index?" + this.$getShareUrlParams()
      }
    },

    // 分享到朋友圈
    onShareTimeline() {
      return {
        title: this.setting.page.shareTitle,
        path: "/pages/signin/index?" + this.$getShareUrlParams()
      }
    }

  }
</script>

<style lang="scss" scoped>
  .container {
    padding-bottom: 80rpx;
    background-color: var(--bg-color);
  }

  // 页面头部
  .header {
    position: relative;
    height: 358rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 30rpx;

    .fiexd-action {
      position: absolute;
      right: 0;
      top: 60rpx;
      width: 130rpx;
      height: 50rpx;
      background-color: rgba(0, 0, 0, .12);
      border-radius: 50rpx 0 0 50rpx;
      color: #fff;
      font-size: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  // 签到信息
  .signin-info {
    position: relative;
    width: 688rpx;
    margin: -80rpx auto 30rpx auto;
    background-color: #fff;
    border-radius: 30rpx;
    padding: 50rpx 30rpx;
    box-shadow: 0 4rpx 30rpx 0 rgba(0, 0, 0, 0.03);

    .signin-count {
      display: flex;
      margin-bottom: 30rpx;
    }

    .count-item {
      flex: 1;
      text-align: center;
      border-right: 1rpx solid #eaeaea;

      &:last-child {
        border-right: none;
      }

      .days {
        margin-bottom: 10rpx;
        color: $main-bg;

        .value {
          font-size: 42rpx;
          margin-right: 6rpx;
        }

        .unit {
          font-size: 26rpx;
        }
      }

      .title {
        font-size: 26rpx;
      }
    }

    // 通知样式
    .notice {
      padding: 20rpx;
      font-size: 24rpx;
      background: linear-gradient(to right, #fff9f0, #fffcf7);
      border-radius: 15rpx;

      .value {
        margin: 0 4rpx;
        color: $main-bg;
      }

      .right-arrow {
        font-size: 24rpx;
      }
    }

    // 累计签到
    .cumulative-info {
      margin-bottom: 20rpx;

      .notice {
        display: inline-block;

        .right-arrow {
          display: inline-block;
          margin-left: 10rpx;
        }
      }
    }

    // 今日签到
    .today-info {
      margin-bottom: 30rpx;
      padding: 20rpx;
      background-color: #fff9f0;
      border-radius: 15rpx;
    }

    // 签到按钮
    .btn-wrapper {
      // height: 100%;
      padding: 0 20rpx;

      .btn-item {
        flex: 1;
        font-size: 26rpx;
        height: 70rpx;
        color: #fff;
        border-radius: 50rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .btn-item-main {
        background: linear-gradient(to right, $main-bg, $main-bg2);
        color: $main-text;

        &.disabled {
          opacity: 0.7;
        }
      }
    }
  }

  // 签到日历
  .calendar-info {
    width: 688rpx;
    margin: 0 auto;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 30rpx 0 rgba(0, 0, 0, 0.03);
  }

  // 签到规则
  .rules-desc {
    padding: 30rpx 48rpx;
    font-size: 26rpx;
    line-height: 50rpx;
    text-align: left;
    color: #606266;
    height: 440rpx;
    box-sizing: border-box;
  }
</style>